<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>WebCat</title>
    <style>
      /* 基础页面样式 */
      body {
        background-color: #121212; /* 深色背景 */
        margin: 0; /* 清除默认边距 */
        padding: 0; /* 清除默认内边距 */
        display: flex; /* 使用弹性布局 */
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        min-height: 100vh; /* 最小高度为整个视口 */
        overflow: hidden; /* 隐藏滚动条 */
        font-family: 'Arial', sans-serif; /* 字体设置 */
      }
      
      /* 主容器样式 */
      .container {
        position: relative; /* 相对定位（用于子元素绝对定位） */
        text-align: center; /* 文字居中 */
      }
      
      /* SVG文字动画效果 */
      text {
        fill: transparent; /* 初始无填充色 */
        stroke: #00ff9d; /* 霓虹绿色描边 */
        stroke-width: 2; /* 描边宽度 */
        stroke-linecap: round; /* 圆角描边端点 */
        stroke-dasharray: 265; /* 虚线描边模式 */
        stroke-dashoffset: 265; /* 初始偏移量（完全隐藏） */
        animation: text 2s ease-out forwards; /* 应用动画 */
        font-size: 60px; /* 字体大小 */
        font-weight: bold; /* 粗体 */
        filter: drop-shadow(0 0 5px rgba(0, 255, 157, 0.5)); /* 发光效果 */
      }

      /* 文字绘制动画关键帧 */
      @keyframes text {
        to {
          stroke-dashoffset: 0; /* 描边完全显示 */
          fill: rgba(0, 255, 157, 0.2); /* 动画结束时添加轻微填充 */
        }
      }
      
      /* 背景光晕效果 */
      .glow {
        position: absolute; /* 绝对定位 */
        width: 100%; /* 宽度100% */
        height: 100%; /* 高度100% */
        /* 径向渐变创建光晕效果 */
        background: radial-gradient(circle at center, rgba(0, 255, 157, 0.1) 0%, transparent 70%);
        animation: pulse 4s infinite alternate; /* 脉冲动画 */
        top: 0; /* 顶部对齐 */
        left: 0; /* 左侧对齐 */
        z-index: -1; /* 置于底层 */
      }
      
      /* 脉冲动画关键帧 */
      @keyframes pulse {
        from {
          opacity: 0.3; /* 起始透明度 */
          transform: scale(0.95); /* 轻微缩小 */
        }
        to {
          opacity: 0.7; /* 结束透明度 */
          transform: scale(1.05); /* 轻微放大 */
        }
      }
      
      /* 粒子容器（保留结构但无功能） */
      .particles {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: -1;
      }
      
      /* 单个粒子样式（保留结构但无功能） */
      .particle {
        position: absolute;
        background-color: rgba(0, 255, 157, 0.5);
        border-radius: 50%;
        pointer-events: none;
      }
    </style>
  </head>
  <body>	
    <!-- 主容器 -->
    <div class="container">
      <!-- 背景光晕元素 -->
      <div class="glow"></div>
      <!-- 粒子容器（空容器） -->
      <div class="particles" id="particles"></div>
      <!-- SVG矢量图形 -->
      <svg width="400" height="200">
        <!-- 居中对齐的动画文字 -->
        <text x="50%" y="60%" text-anchor="middle" dominant-baseline="middle">Hello SVG!</text>
      </svg>
    </div>
    
  </body>
</html>